<template>
  <!--模板-->
  <h1>增删改查</h1>
  <!--修改-->222
  <mod></mod> 
  <!--子模块-->
  <sub1></sub1>
  <!--查询-->
  <find></find>
  <!--列表-->
  <grid></grid>
  <!--分页-->
  <pager></pager>

  <hr>
  pagerState： {{ state.pagerState }}<br>
  mini： {{ state.query.mini }}<br>
  array：{{ state.query.array }}<br>

</template>


<script setup lang="ts">
  import { reactive } from 'vue'
  import {
    onBeforeUnmount, // 卸载前被调用
  } from 'vue'

  import pager from './comp/pager.vue'  // 翻页
  import find from './comp/find.vue' // 查询
  import grid from './comp/grid.vue' // 列表

  // 修改
  import mod from './comp/form.vue'
  // 子模块
  import sub1 from './comp/sub-list.vue'

  // 获取数据的函数
  import getData from './service'

  // 获取父组件的状态
  import { createListState } from './state/list'


  // 创建一个状态
  const state = createListState(getData)



  onBeforeUnmount(() => {
    // console.log('列表模块  被卸载！')
  })
 

 
</script>